<!-- 表单的组件 -->
<template>

    <div class="form-table">

<span
        v-for="column in columns"
        :key="column.key"
        :label="column.name"
>



	<GenerateElementItem :blanks="blanks" :widget="column"  :remote="remote"  v-model="tableData[0][column.model]">

						</GenerateElementItem>
</span>





        <!--		<el-table-->
        <!--				:data="tableData"-->
        <!--				border-->
        <!--		>-->
        <!--			<el-table-column-->
        <!--					label="#"-->
        <!--					fixed-->
        <!--					width="50">-->
        <!--				<template slot-scope="scope">-->
        <!--					<div class="scope-index">-->
        <!--						<span>{{scope.$index + 1}}</span>-->
        <!--					</div>-->
        <!--					<div class="scope-action">-->
        <!--						<el-button @click="handleRemove(scope.$index)" type="danger" icon="el-icon-minus" size="mini" circle></el-button>-->
        <!--					</div>-->
        <!--				</template>-->
        <!--			</el-table-column>-->
        <!--			<el-table-column v-if="columns.length==0"></el-table-column>-->
        <!--			<template v-else>-->
        <!--				&lt;!&ndash; 显示元素名称 &ndash;&gt;-->
        <!--				<span-->
        <!--						v-for="column in columns"-->
        <!--						:key="column.key"-->
        <!--						:label="column.name"-->
        <!--						:width="column.options.width"-->
        <!--				>-->
        <!--					&lt;!&ndash; <el-input></el-input> &ndash;&gt;-->
        <!--					<template slot-scope="scope">-->
        <!--						&lt;!&ndash; 调用父组件生成具体表单 &ndash;&gt;-->
        <!--						<GenerateElementItem :blanks="blanks" is-table="table" :widget="column" v-model="scope.row[column.model]" :models.sync="tableData[scope.$index]" :remote="remote">-->
        <!--&lt;!&ndash;							<template v-slot:[blank.name]="blankScope" v-for="blank in blanks">&ndash;&gt;-->
        <!--&lt;!&ndash;								<slot :name="blank.name" :model="scope.row"></slot>&ndash;&gt;-->
        <!--&lt;!&ndash;							</template>&ndash;&gt;-->
        <!--						</GenerateElementItem>-->
        <!--					</template>-->

        <!--				</span>-->
        <!--			</template>-->
        <!--		</el-table>-->
        <el-button icon="el-icon-plus" type="text" @click="handleAddRow">添加</el-button>
    </div>
</template>

<script>
    export default {
        components: {
            GenerateElementItem: () => import('../GenerateElementItem.vue')
        },
        props: ['columns', 'value', 'models', 'remote', 'blanks'],
        data () {
            return {
                tableData: this.value,
                dataModels: this.models
            }
        },
        methods: {

            handleAddRow () {
                let item = {}

                for (let i = 0; i < this.columns.length; i++) {
                    if (this.columns[i].type === 'blank') {
                        item[this.columns[i].model] = this.columns[i].options.defaultType == 'String' ? '' : (this.columns[i].options.defaultType == 'Object' ? {} : [])
                    } else {
                        item[this.columns[i].model] = this.columns[i].options.defaultValue
                    }
                }

                this.tableData.push(item);

            },

            handleRemove (index) {
                this.tableData.splice(index, 1)
            }
        },
        mounted () { //这个属性就可以，在里面声明初始化时要调用的方法即可
            this.handleAddRow();
        },
        watch: {
            value (val) {
                this.tableData = val
            },
            tableData (val) {
                this.$emit('input', val)
            },
            dataModels: {
                deep: true,
                handler (val) {
                    this.$emit('update:models', val)
                }
            },
            models: {
                deep: true,
                handler (val) {
                    this.dataModels = val
                }
            },
        },created(){
        }
    }
</script>


